<template>
  <van-dropdown-item title="筛选" ref="item" @open="filterItemOpen">
    <template #default>
      <van-popup
        v-model="show"
        position="right"
        :style="{ width: '75%', height: '100%' }"
        :get-container="getContainer"
      >
        <!-- 主体内容 -->
        <van-cell title="户型" class="cell-item">
          <template #label>
            <van-button
              type="default"
              plain
              size="small"
              v-for="(item, index) in filterCondition[0]"
              :key="index"
              @click="onClick(item.value)"
              :class="{ actie_item: more.indexOf(item.value) !== -1 }"
              >{{ item.label }}</van-button
            >
          </template>
        </van-cell>
        <van-cell title="朝向" class="cell-item">
          <template #label>
            <van-button
              type="default"
              plain
              size="small"
              v-for="(item, index) in filterCondition[1]"
              :key="index"
              @click="onClick(item.value)"
              :class="{ actie_item: more.indexOf(item.value) !== -1 }"
              >{{ item.label }}</van-button
            >
          </template>
        </van-cell>
        <van-cell title="楼层" class="cell-item">
          <template #label>
            <van-button
              type="default"
              plain
              size="small"
              v-for="(item, index) in filterCondition[2]"
              :key="index"
              @click="onClick(item.value)"
              :class="{ actie_item: more.indexOf(item.value) !== -1 }"
              >{{ item.label }}</van-button
            >
          </template>
        </van-cell>
        <van-cell title="房屋亮点" class="cell-item">
          <template #label>
            <van-button
              type="default"
              plain
              size="small"
              v-for="(item, index) in filterCondition[3]"
              :key="index"
              @click="onClick(item.value)"
              :class="{ actie_item: more.indexOf(item.value) !== -1 }"
              >{{ item.label }}</van-button
            >
          </template>
        </van-cell>
        <!-- /主体内容 -->
        <!-- 底部确认取消 -->
        <div class="cancle-confirm">
          <span @click="cancel">取消</span>
          <span @click="confirm">确定</span>
        </div>
        <!-- /底部确认取消 -->
      </van-popup>
    </template>
  </van-dropdown-item>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { queryHouseApi } from '@/api'
export default {
  name: 'Filterr',
  components: {},
  props: {},
  data() {
    return {
      show: false,
      more: []
    }
  },
  computed: {
    ...mapState(['houseCondition']),
    ...mapState(['queryParams']),
    // 将后台数据处理成筛选页面所需数据
    filterCondition() {
      let newArr = []
      // 解构户型、朝向、楼层、房屋亮点
      if (this.houseCondition) {
        const { roomType, oriented, floor, characteristic } =
          this.houseCondition
        newArr = [roomType, oriented, floor, characteristic]
      }
      return newArr
    }
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['getQueryParams']),
    getContainer() {
      // 别动! 不挂载这个, 会有bug, 不知道为啥...
      return document.querySelector('body')
    },
    confirm(val) {
      // console.log('确认', val)
      // 同时关闭下拉菜单的弹出层和poupu弹出层，这本来有个bug
      // this.$refs.item.toggle(false)
      this.show = false
      this.filterSeekHouser()
    },
    cancel() {
      this.$refs.item.toggle(false)
      this.show = false
    },
    filterItemOpen() {
      this.show = true
      // 别动! 不挂载这个, 会有bug, 不知道为啥...
      return document.querySelector('body')
    },
    // 合成筛选页面的请求字段信息
    onClick(value) {
      // console.log(value)
      const index = this.more.indexOf(value)
      // console.log(index)
      if (index === -1) {
        this.more.push(value)
      } else {
        this.more.splice(index, 1)
      }
      // console.log(this.more)
    },
    // 通过合成的条件查询房屋数据
    async filterSeekHouser() {
      // 1、处理more请求字段
      if (this.more) {
        this.more = this.more.join(',')
      }
      // console.log('筛选页面的复合查询条件', this.more)
      const obj = this.queryParams
      obj.more = this.more
      // 2、更新本地和vuex中复合请求条件
      this.getQueryParams(obj)
      // console.log('更新后的veux和本地查询条件', obj)
      //3、发请求
      try {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        const { data } = await queryHouseApi(obj)
        // console.log(data)
        // console.log('合成查询条件请求后台返回数据', data.body.list)
        // 触发父组件事件将改变查询条件后重新申请得到的数据传出去，以便更新页面
        this.$emit('updateConditionFondHouse', data.body.list)
      } catch (err) {
        this.$toast('加载失败请重试')
      }
      // 清空more并赋值空数组，不然下次不可以使用该功能
      this.more = []
    }
  }
}
</script>

<style scoped lang="less">
:deep(.van-cell__title) {
  border-bottom: 1px solid #e5e5e5;
}
.cancle-confirm {
  display: flex;
  height: 100px;
  width: 100%;
  font-size: 36px;
  text-align: center;
  line-height: 100px;

  span:nth-child(1) {
    flex: 35%;
    border: 1px solid #e3e5e6;
    color: #21b97a;
    background-color: #fff;
  }
  span:nth-child(2) {
    flex: 70%;
    background-color: #21b97a;
    color: #fff;
  }
}
:deep(.van-overlay) {
  background-color: rgba(0, 0, 0, 0.1);
}
:deep(.van-cell__label) {
  width: 370px;
  margin: 40px 0 40px 65px;
}
:deep(.van-button) {
  font-size: 12px;
  margin-left: 36px;
  margin-bottom: 20px;
  color: #888;
  width: 140px;
  height: 64px;
}
.actie_item {
  border: 1px solid #21b97a;
  color: #21b97a;
  background-color: #defaef;
}
</style>
